<template>
  <div class="article-box">
    <div class="page-index">
      <div class="page-index-warp">
        {{$route.meta.title}}
      </div>
    </div>
    <div v-infinite-scroll="loadMore" class="article-list" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
      <template v-for="item in itemList">
        <router-link :to="'/article_detail/'+item.id" class="article-item">
          <div class="title">
            {{item.title}}
          </div>
          <div class="msg">
            <span class="class">{{item.menu.title}}</span>
            <span class="view">浏览：{{item.views}}</span>
            <span class="time">{{item.updatedAt | time}}</span>
          </div>
          <div class="remark">
            {{item.remark}}
          </div>
        </router-link>
      </template>
    </div>



  </div>
</template>

<script>
  import Api from "../../api"
export default {
  data () {
    return {
        itemList:[],
      params:{
            pagination:{
                pageNumber:1
            },
        screen:{},
        order:"",
      },
      busy: false
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route.path': 'getItem'
  },
  methods:{
    getItem:function () {
      if(this.$route.meta.menuId){
        this.params.screen={"menuId":this.$route.meta.menuId};
        this.params.screen=JSON.stringify(this.params.screen);

      }else {
        this.params.screen={};
      }
      Api.getArticle(this.params).then((response)=>{
        if (response.status===200){
          this.itemList=response.data.articles;
          this.params=response.data.params;
        }
      })
    },
    loadMore: function() {
      this.busy = true;
    }
  },
  mounted(){
    this.getItem();
    console.log(this.$route.path);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
